<template>
  <div class="loginkh">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" >
      <div class="divleft"></div>
      <div class="divright">
        <div class="divImg">
          <img src="../assets/khImg/kulogo.png" alt="">
        </div>
        <div class="title"><b>中煤晋中能化公司考核系统</b> </div>
        <div class="formInput">
          <el-form-item prop="username" label="" >
            <el-input v-model="loginForm.assessmentCode" type="text"  placeholder="考核码">
              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item >
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              @click="handleLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </div>

      </div>
    </el-form>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import Cookies from "js-cookie";
  export default {
    name: "Login",
    data() {
      return {
        codeUrl: "",
        cookiePassword: "",
        loginForm: {
          assessmentCode: "C564-O99Y-3O44",
          // assessmentCode: "",

        },
        loginRules: {
          assessmentCode: [
            { required: true, trigger: "blur", message: "考核码不能为空" }
          ],
        },
        loading: false,
        redirect: undefined
      };
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {

    },
    methods: {

      handleLogin() {
        Cookies.remove("Admin-Token");
        Cookies.remove("khm");
        if(!this.loginForm.assessmentCode){
          this.$message({
            type: 'error',
            message: '考核码不能为空'
          });
          return
        }
        this.$router.push("/homePage");
        request({
          url: '/login',
          method: 'post',
          data:this.loginForm
        }).then(response => {
          this.loading = false;
          Cookies.set('Admin-Token', response.token)
          Cookies.set('khm', this.loginForm.assessmentCode)
          this.$router.push("/homePage");
        });
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" >
  .loginkh {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #1b95d3;
  }
  .loginkh .login-form {
    width: 1693px;
    height: 700px;
    display: flex;
    .divleft {
      width: 1047px;
      height: 700px;
      background-image: url("../assets/khImg/gstp.png");
      background-size: cover;
    }
    .divright {
      width: 649px;
      height: 700px;
      background-color: #ffffff;
      .divImg {
        height: 125px;
        text-align: center;
        margin-top: 63px;
        img {
          height: 100%;
          width: 134px;
        }
      }
      .title {
        margin-top: 18px;
        text-align: center;
        height: 19px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 20px;
        letter-spacing: 0px;
        color: #03669d;
      }
      .formInput {
        text-align: center;
        margin-top: 116px;
        .el-input--medium, .el-input__inner {
          height: 56px;
          line-height: 56px;
        }
        .el-input {
          width: 387px;
          height: 56px;
          background-color: #f6f6f6;
          border-radius: 7px;
          input {
            height: 56px;
            padding-left:49px ;
          }
        }
        .input-icon {
          height: 56px;
          width: 18px;
          margin-left: 15px;
        }
        .el-button {
          width: 387px;
          height: 56px;
          background-color: #1b95d3;
          box-shadow: 0px 2px 7px 0px
          rgba(0, 10, 15, 0.4);
          border-radius: 7px;
          font-size: 20px;
          font-family: MicrosoftYaHei;
        }
      }

    }

  }

  @media screen and (max-width: 900px) {
    .loginkh {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      background-color: #ffffff;
    }
    .loginkh .login-form {
      width: 1693px;
      height: 700px;
      display: flex;
      .divleft {
        width: 1047px;
        height: 700px;
        background-image: url("../assets/khImg/gstp.png");
        background-size: cover;
        display: none;
      }
      .divright {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        .divImg {
          height: 125px;
          text-align: center;
          margin-top: 63px;
          img {
            height: 100%;
            width: 134px;
          }
        }
        .title {
          margin-top: 18px;
          text-align: center;
          height: 19px;
          font-family: MicrosoftYaHei-Bold;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 20px;
          letter-spacing: 0px;
          color: #03669d;
        }
        .formInput {
          text-align: center;
          margin-top: 116px;
          .el-input--medium, .el-input__inner {
            height: 56px;
            line-height: 56px;
          }
          .el-input {
            width: 100%;
            height: 56px;
            background-color: #f6f6f6;
            border-radius: 7px;
            input {
              height: 56px;
              padding-left:49px ;
            }
          }
          .input-icon {
            height: 56px;
            width: 18px;
            margin-left: 15px;
          }
          .el-button {
            width: 100%;
            height: 56px;
            background-color: #1b95d3;
            box-shadow: 0px 2px 7px 0px
            rgba(0, 10, 15, 0.4);
            border-radius: 7px;
            font-size: 20px;
            font-family: MicrosoftYaHei;
          }
        }

      }

    }
  }

</style>
